<!doctype html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React + TS</title>
    <style>
      html,
      body,
      #root,
      .loading{
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #root .loading {
        background: linear-gradient(
            135deg,
            hsl(170deg, 80%, 70%),
            hsl(190deg, 80%, 70%),
            hsl(250deg, 80%, 70%),
            hsl(320deg, 80%, 70%)
        );
        background-size: 200% 200%;
        animation: gradient-move 15s ease alternate infinite;
      }
      @keyframes gradient-move {
        0% {
          background-position: 0% 0%;
        }
        100% {
          background-position: 100% 100%;
        }
      }
      .clock {
        border-radius: 60px;
        border: 3px solid white;
        height: 80px;
        width: 80px;
        position: relative;
        top: 28%;
        top: -webkit-calc(50% - 43px);
        top: calc(50% - 43px);
        left: 35%;
        left: -webkit-calc(50% - 43px);
        left: calc(50% - 43px);
      }
      .clock:before {
        content: '';
        position: absolute;
        background-color: white;
        top: 6px;
        left: 48%;
        height: 35px;
        width: 4px;
        border-radius: 5px;
        -webkit-transform-origin: 50% 94%;
        transform-origin: 50% 94%;
        -webkit-animation: ptAiguille 12s linear infinite;
        animation: ptAiguille 12s linear infinite;
      }
      .clock:after {
        content: '';
        position: absolute;
        background-color: white;
        top: 2px;
        left: 48%;
        height: 38px;
        width: 4px;
        border-radius: 5px;
        -webkit-transform-origin: 50% 97%;
        transform-origin: 50% 97%;
        -webkit-animation: grdAiguille 2s linear infinite;
        animation: grdAiguille 2s linear infinite;
      }
      @-webkit-keyframes ptAiguille {
        0% {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }
      @keyframes ptAiguille {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }

      @-webkit-keyframes grdAiguille {
        0% {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }
      @keyframes grdAiguille {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
    </style>
  </head>
  <body class="theme-primary">
  <!--[if lt IE 7]>
  <div class="upgrade">
    <h1>请升级您的浏览器</h1>
    <p>您的浏览器已过时，可能与本网站不兼容。 为了确保最佳体验，请升级到较新的浏览器。</p>
    <a href="https://browsehappy.com/">立即升级</a>
  </div>
  <![endif]-->
  <div id="root">
    <div class="loading">
      <div class="clock"></div>
    </div>
  </div>
  <script type="module" src="/src/main.tsx"></script>
  </body>
</html>
